<template>
	<div id="container">
		<div class="cp-header">
			<div class="cp-main-box">
				<a href="/" class="cp-logo">
					<!-- 主页logo -->
					<img src="/img/logo.png">
				</a>
				<div class="layui-nav headerRight" lay-filter="">
					<!-- 搜索框 -->
					<div class="cp-header-search">
						<input id="searchBox" @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
						<a :href="'/seach/' + searchContent" class="iconfont icon-search"></a>
					</div>

					<div class="cp-header-link">
						<!-- 跳转充值页面 -->
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
					</div>
					<div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
						<a href="/register">注册</a>
						<span></span>
						<a href="" @click.prevent="loginDialogVisible = true">登录</a>
					</div>
					<div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
						<!-- 跳转用户个人中心 -->
						<a href="/user/info">
							<i class="iconfont icon-dengpao"></i>
							<!-- 用户头像（可选） -->
							<img src="/img/default_head.png" class="layui-nav-img header">
							<!-- 用户名 -->
							<span class="userName cp-ellipsis" v-text="userName"></span>
							<!-- 更多 -->
							<span class="layui-nav-more"></span>
						</a>

						<dl class="layui-nav-child" id="userMsgChild">
							<dd>
								<a href="javascript:;" @click="logout()">
									<i class="iconfont icon-tuichu"></i>
									退出
								</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 模态框 -->
			<el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
				<el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
					<el-form-item prop="tel">
						<el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="singIn">立即登录</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<!-- 导航栏分类 -->
		<div class="cp-nav">
			<div class="cp-main-box">
				<a class="cp-nav-item active" href="/" style="color: rgba(81, 194, 154, 1)">首页</a>
				<a class="cp-nav-item" href="/category/1">
					古代
				</a>
				<a class="cp-nav-item" href="/category/2">
					现代
				</a>
				<a class="cp-nav-item" href="/category/3">
					幻想
				</a>
				<a class="cp-nav-item" href="/category/4">
					架空
				</a>
			</div>
		</div>

		<div id="vueBox" class="cp-main-box">
			<div class="cp-index-module-1">
				<!-- 左边分类 -->
				<div class="cp-index-type-list">
					<a href="/category/1" class="cp-index-type-item">
						<img src="/img/gudai.png">
						<p>古代</p>
					</a>
					<a href="/category/2" class="cp-index-type-item">
						<img src="/img/xiandai.png">
						<p>现代</p>
					</a>
					<a href="/category/3" class="cp-index-type-item">
						<img src="/img/huanxiang.png">
						<p>幻想</p>
					</a>
					<a href="/category/4" class="cp-index-type-item">
						<img src="/img/jiakong.png">
						<p>架空</p>
					</a>
				</div>

				<!-- banner轮播图 -->
				<div class="cp-index-banner">
					<div class="cp-index-banner-list">
						<div class="swiper-container cp-banner-swiper swiper-container-horizontal">
							<el-carousel indicator-position="none" height="160px">
								<el-carousel-item v-for="item in carousels" :key="item.userId">
									<img :src='item.image' />
								</el-carousel-item>
							</el-carousel>
						</div>
					</div>

					<!-- 本周强推 -->
					<div class="cp-card">
						<div class="cp-card-header cp-card-header-bold">
							<!-- 图标 -->
							<i class="iconfont icon-qiangtui"></i>
							<h3>本周强推</h3>
						</div>
						<div class="cp-card-line"></div>
						<div id="weekRecListDom" class="cp-card-content" style="position: relative;">
							<ul class="cp-index-weekrec">
								<li v-for="book in weekList" :key="book.bookId">
									<span class="cp-novel-type">
										<!-- 分类名称 -->
										{{ book.categoryName }}
									</span>
									<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
										<!-- 书籍名 -->
										{{ book.bookName }}
									</a>
									<a href="javascript:;" class="cp-novel-author cp-ellipsis">
										<!-- 作者名 -->
										{{ book.authorName }}
									</a>
									<span class="cp-novel-desc cp-ellipsis">
										<!-- 简介 -->
										{{ book.description }}
									</span>
								</li>
							</ul>
						</div>
					</div>
				</div>


				<div class="cp-index-article">
					<!-- 右边热门 -->
					<div class="cp-card" style="margin-bottom: 14px;">
						<div class="cp-card-header">
							<!-- 图标 -->
							<i class="iconfont icon-gonggao"></i>
							<h3>TOP</h3>
						</div>
						<div class="cp-card-content">
							<ul class="cp-index-article-list">
								<li v-for="book in topList" :key="book.id">
									<!-- 作者 -->
									<span class="cp-article-type">[ {{ book.authorName }} ]</span>
									<a :href="'/novel/' + book.bookId" class="cp-article-title cp-ellipsis">
										<!-- 书名 -->
										{{ book.bookName }}
									</a>
								</li>
							</ul>
						</div>
					</div>

					<!-- 今日必读轮播卡片 -->
					<div class="cp-card">
						<div class="cp-card-header">
							<!-- 图标 -->
							<i class="iconfont icon-jingxuan"></i>
							<h3>今日必读</h3>
						</div>
						<!-- 轮播内容 -->
						<div class="cp-card-content" style="padding-top: 6px; height: 169px;">
							<div class="cp-index-dayrec-list">
								<div class="swiper-container cp-dayrec-swiper" id="dayrecList">
									<div class="swiper-wrapper">
										<div class="swiper-slide" v-for="(item, index) in todayList" :key="item.bookId">
											<a class="cp-index-dayrec-item" :href="'/novel/' + item.bookId">
												<img :src="item.image" />
											</a>
											<div :class="'cp-hidden cpDayrecItem_' + index">
												<a :href="'/novel/' + item.bookId" class="cp-novel-name">{{ item.bookName }}</a>
												<a href="javascript:;" class="cp-novel-author">{{ item.authorName }}</a>
											</div>
										</div>
									</div>
									<div class="swiper-pagination"></div>
								</div>
								<div class="cp-index-dayrec-index" id="cpIndexDayrecIndex"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>


			<!-- 新书上架 -->
			<div class="cp-card cp-index-vip">
				<div class="cp-card-header cp-card-header-bold">
					<!-- 图标 -->
					<i class="iconfont icon-vip"></i>
					<h3>新鲜上架</h3>
				</div>
				<div class="cp-card-line"></div>
				<div class="cp-index-vip-list">
					<div class="cp-index-vip-item" v-for="book in newList" :key="book.bookId">
						<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
							<!-- 书籍图片 -->
							<img :src="book.image">
						</a>
						<div class="left" style="width: 120px;">
							<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
								<!-- 书名 -->
								{{ book.bookName }}
							</a>
							<a href="javascript:;" class="cp-novel-author iconfont icon-zuozhe">
								<!-- 作者 -->
								{{ book.authorName }}
							</a>
							<p class="cp-novel-desc">
								<!-- 书籍简介 -->
								{{ book.description }}
							</p>
						</div>
					</div>
				</div>
			</div>



			<div class="cp-index-typerec">
				<!-- 左边推荐 -->
				<div class="cp-index-typerec-left">
					<div class="cp-card" style="margin-top: 14px;">
						<div class="cp-card-header cp-card-header-bold"><i class="iconfont icon-wanjie"></i>
							<h3>完结好文，尽情氪金</h3>
						</div>
						<div class="cp-card-line"></div>
						<ul class="cp-card-content cp-simple-list" style="height: 430px;">
							<li class="cp-simple-item" v-for="book in finishList" :key="book.bookId">
								<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis" style="max-width: 170px;">
									<!-- 书名 -->
									{{ book.bookName }}
								</a>
								<a href="javascript:;" class="cp-novel-author" style="max-width: 84px">
									<!-- 作者 -->
									{{ book.authorName }}
								</a>
							</li>
						</ul>
					</div>

					<div class="cp-card" style="margin-top: 14px;">
						<div class="cp-card-header cp-card-header-bold">
							<!-- 图标 -->
							<i class="iconfont icon-xinshu"></i>
							<h3>新书精选</h3>
						</div>
						<div class="cp-card-line"></div>
						<ul class="cp-card-content cp-simple-list" style="height: 430px;">
							<li class="cp-simple-item" v-for="book in newBookList" :key="book.bookId">
								<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis" style="max-width: 170px;">
									<!-- 书名 -->
									{{ book.bookName }}
								</a>
								<a href="javascript:;" class="cp-novel-author" style="max-width: 84px;">
									<!-- 作者 -->
									{{ book.authorName }}
								</a>
							</li>
						</ul>
					</div>
					<!-- 新书精选结尾 -->
				</div>

				<!-- 右侧排行 -->
				<div class="cp-index-typerec-right">
					<div class="cp-card" v-for="item in categoryList" :key="item.categoryId">
						<div class="cp-card-header cp-card-header-bold">
							<span class="cp-card-header-line"></span>
							<!-- 分类名 -->
							<h3>{{ item.categoryName }}</h3>
						</div>
						<div class="cp-card-line"></div>
						<div id="typeRecListDom_3" class="cp-card-content cp-simple-list" style="height: 430px;">
							<div class="cp-index-typerec-list">
								<div class="cp-index-typerec-item" v-for="book in item.bookList" :key="book.bookId">
									<div class="cp-detail-item cp-hidden">
										<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
											<!-- 书籍图片 -->
											<img else="" :src="book.image" class="lazy-load">
										</a>
										<div class="left" style="width: 307px;">
											<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
												<!-- 书名 -->
												{{ book.bookName }}
											</a>
											<a href="javascpipt:;" class="cp-novel-author iconfont icon-zuozhe">
												<!-- 作者 -->
												{{ book.authorName }}
											</a>
											<p class="cp-novel-desc cp-ellipsis">
												<!-- 简介 -->
												{{ book.descript }}
											</p>
											<!-- 书籍标签 -->
											<div class="cp-novel-tags">
												<a :href="'/category/' + item.categoryId">
													<!-- 分类名称 -->
													<span>{{ item.categoryName }}</span>
												</a>
												<!-- 点击量 -->
												<span>{{ book.clickNumber }}</span>
											</div>
										</div>
									</div>
									<!-- 鼠标移出状态 -->
									<div class="cp-simple-item">
										<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis" style="max-width: 237px;">
											<!-- 书名 -->
											{{ book.bookName }}
										</a>
										<a href="javascript:;" class="cp-novel-author" style="max-width: 100px;">
											{{ book.authorName }}
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>

			<!-- 排行榜 -->
			<div class="cp-ranking" style="margin-top: 14px;">
				<div class="cp-ranking-list" style="width: 286.5px; height: 570px;" v-for="item in rankingList" :key="item.id">
					<div class="cp-ranking-top">
						<i class="iconfont icon-dashang"></i>
						<!-- 排行榜名 -->
						<h3>{{ item.name }}</h3>
					</div>
					<div class="cp-ranking-novel-list">
						<div class="cp-ranking-novel-item cp-ranking-novel-detail" v-if="index == 0" v-for="(book, index) in item.list"
						 :key="book.bookId">
							<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
								<!-- 书籍图片 -->
								<img :src="book.image">
							</a>
							<i class="cp-ranking-top-img">
								<!-- 第一名角标 -->
								<img src="/img/top_1.png">
							</i>
							<div class="left" style="width: 154.5px;">
								<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">{{ book.bookName }}</a>
								<a href="javascript:;" class="cp-novel-author iconfont icon-zuozhe">{{ book.authorName }}</a>
								<p class="cp-novel-desc">{{ book.description }}</p>
							</div>
						</div>
						<div class="cp-ranking-novel-item" v-else>
							<!-- 排名 -->
							<span class="cp-ranking-order" v-text="index + 1"></span>
							<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
								<!-- 书名 -->
								{{ book.bookName }}
							</a>
						</div>
						<!-- <a class="cp-ranking-more">More &gt;</a> -->
					</div>
				</div>
				<div class="clear"></div>
			</div>


			<!-- 最近更新 -->
			<div class="cp-card" style="margin-top: 14px;">
				<div class="cp-card-header cp-card-header-bold">
					<span class="cp-card-header-line">

					</span>
					<h3>最近更新</h3>
					<a href="更多" class="more">More &gt; </a>
				</div>
				<div class="cp-card-content">
					<table class="cp-update-table">
						<colgroup>
							<col width="55">
							<col width="220">
							<col width="130">
							<col>
							<col width="190">
							<col width="150">
						</colgroup>
						<thead>
							<tr>
								<th>类型</th>
								<th>书名</th>
								<th>作者</th>
								<th>简介</th>
								<th>章节</th>
								<th>更新时间</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="chapter in chapterList" :key="chapter.chapterId">
								<td>
									<span class="cp-novel-type" style="display: block; max-width: 85px">{{ chapter.categoryName }}</span>
								</td>
								<td>
									<a :href="'/novel/' + chapter.bookId" class="cp-ellipsis" style="display: block; max-width: 210px">{{ chapter.bookName }}</a>
								</td>
								<td>
									<span class="cp-ellipsis" style="display: block; max-width: 120px;">{{ chapter.authorName }}</span>
								</td>
								<td>
									<span class="cp-ellipsis" style="display: block; max-width: 380px">{{ chapter.description }}</span>
								</td>
								<td>
									<a :href="'/novel/' + chapter.bookId" class="cp-ellipsis" style="display: block; max-width: 180px;">{{ chapter.chapterName }}</a>
								</td>
								<td>
									<span style="display: block;
                                max-width: 140px">{{ chapter.updateTime }}</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>


		<!-- footer -->
		<div class="cp-main-box cp-footer">
			<div class="cp-footer-copyright">
				<span>北京长佩网络科技有限公司</span>
				<span>增值电信业务经营许可证：京B2-20180244</span>
				<span>ICP备案号： 京ICP备17046709号-2</span>
				<span>网络文化经营许可证：京网文（2017）8697-992号</span>
			</div>
			<div class="cp-footer-declaration">
				<p>用户投稿、上传、发布的任何内容（包括但不限于作品、评论、话题、图片等）均属用户个人行为，不代表本站的立场和观点；本站仅作为用户内容的上传存储平台，不承担任何责任。</p>
				<p>请所有用户务必严格遵守国家互联网信息管理办法及相关规定，任何色情、暴力等违法违规内容本站均拒绝，一经发现，立即删除；情况严重的，将按本站管理制度从重处理。</p>
				<p>如有内容违法违规或侵害他人合法权益，欢迎举报投诉，一经核实，立即删除。</p>
			</div>
			<div class="cp-footer-contact">
				<span>联系电话：010-87595164（周一至周五 9：00-17:30）</span>
				<span>联系邮箱：services@cpwxw.net</span>
				<span>联系地址：北京市丰台区名流未来大厦1008</span>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	export default {
		name: "Main",
		data() {
			return {
				// 搜索内容
				searchContent: "",
				// 登录表单
				loginForm: {
					userTel: "",
					password: "",
				},
				// 登录模态框可见
				loginDialogVisible: false,
				// 轮播图
				carousels: [{
						bookId: 1, // 书籍id
						image: '/img/carousel1.jpg' // 书籍图片
					},
					{
						bookId: 2, // 书籍id
						image: '/img/carousel2.jpg' // 书籍图片
					},
					{
						bookId: 3, // 书籍id
						image: '/img/carousel3.jpg' // 书籍图片
					}
				],
				// 今日必读轮播
				todayList: [
					{
						bookName: '永无宁日ABO',
						image:'/img/books/bb6eb1191af2c5179253803ec5cc60ef.jpg',
						authorName: '江岸',
						authorId: 2,
						bookId: 278
					},
					{
						bookName: '你和照片不一样',
						image:'/img/books/954c337bca21f27f1ca18df1c37c67d11b96.jpg',
						authorName: '余醒',
						authorId: 1,
						bookId: 1
					}
				],
				// 本周强推
				weekList: [],
				// TOP 书籍
				topList: [],
				// 新鲜上架
				newList: [],
				// 完结好文
				finishList: [],
				newBookList: [],
				// 四个分类推荐
				categoryList: [],
				// 底部四个排行榜
				rankingList: [],
				// 最近更新
				chapterList: []
			}
		},
		computed: {
			// 登录状态
			logged: function() {
				return (this.userName != null);
			},
			// 用户名
			userName: function() {
				return sessionStorage.getItem("userName");
			}
		},
		created() {
			// 初始化
			this.initMain();
		},
		mounted() {
			// 启用 layui-element 模块
			layui.use('element');
			
			// 初始化今日必读
			new Swiper('#dayrecList', {
				initialSlide: 1,
				autoplay: {
					disableOnInteraction: false,
				},
				loop: true,
				slidesPerView: 3,
				centeredSlides: true,
				watchSlidesProgress: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				on: {
					sliderMove: function() {
						let html = $('.cpDayrecItem_' + this.realIndex).html();
						$('#cpIndexDayrecIndex').html(html);
					},
					slideChange: function() {
						let html = $('.cpDayrecItem_' + this.realIndex).html();
						$('#cpIndexDayrecIndex').html(html);
					}
				}
			})
		},
		methods: {
			// 初始化主页
			initMain() {
				let _this = this;
				$.ajax({
					url: "http://localhost/main",
					success: function(res) {
						_this.weekList = res.data.weekList;
						_this.topList = res.data.topList;
						// _this.todayList = res.data.todayList;
						_this.newList = res.data.newList;
						_this.newBookList = res.data.newBookList;
						_this.finishList = res.data.finishList;
						_this.rankingList = res.data.rankingList;
						_this.categoryList = res.data.categoryList;
						_this.chapterList = res.data.chapterList;
					}
				});
			},
			// 根据书名、作者搜索
			search() {
				// $.ajax({
				//     url: "",
				//     type: "GET",
				//     success(data) {

				//     }
				// });
			},
			// 用户登录
			singIn() {
				let _this = this;
				$.ajax({
					url: "http://localhost/user/login",
					type: "POST",
					data: _this.loginForm,
					success: function(res) {
						// 判断响应码
						if (res.code != 200) {
							// 错误提示信息
							_this.$message.error(res.message);
							return;
						}
						// 登录成功提示信息
						_this.$message.success("登录成功");
						// 关闭模态框
						_this.loginDialogVisible = false;
						// 将返回数据存入 sessionStorage
						sessionStorage.setItem("userId", res.data.userId);
						sessionStorage.setItem("userName", res.data.userName);
						// 存入作者 Id
						if (res.data.authorId != null) {
							sessionStorage.setItem("authorId", res.data.authorId);
						}
						// 刷新
						location.reload();
					}
				});
			},
			// 用户退出登录
			logout() {
				// 清空 sessionStorage
				sessionStorage.clear();
				// 刷新
				location.reload();
			}

		}
	}
</script>
<style scoped>
	.el-button {
		background-color: #51c29a;
		border: #51c29a 1px solid;
		width: 100%;
		border-radius: 3px;
	}

	.el-button:hover {
		background-color: #7adbbb;
		border: #7adbbb solid 1px;
	}

	.loginBoxTitle {
		bottom: 20px;
	}

	.cp-index-type-list {
		float: left;
		width: 242px;
		height: 404px;
		padding: 1px 1px 0 0;
		margin-right: 18px;
		background-color: rgba(240, 240, 240, 1);
	}

	.cp-index-type-item {
		float: start;
		width: 242px;
		height: 100px;
		margin: 0 0 1px 1px;
		background-color: #ffffff;
	}
</style>
